<template>
	<view class="form-main">
		<uni-forms ref="baseForm" label-position="top" label-width="auto" :modelValue="form" :rules="rules">
			<uni-forms-item label="登录手机号" required name="phone">
				<uni-easyinput v-model="form.phone" placeholder="请输入" type="number" maxlength="11" trim clearable />
			</uni-forms-item>

			<view style="display: flex; justify-content: space-between">
				<view style="flex: 1">
					<uni-forms-item label="短信验证码" required name="authCode">
						<uni-easyinput placeholder="请输入" v-model="form.authCode" type="number" maxlength="4" trim
							clearable />
					</uni-forms-item>
				</view>
				<view style="width: 100px; margin-left: 10px; padding-top: 40px">
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
					<u-button type="primary" size="small" @tap="getPhoneAuthCode">{{ tips }}</u-button>
				</view>
			</view>

			<uni-row>
				<uni-col :span="14"> </uni-col>
				<uni-col :span="9" :offset="1" style="margin-top: 40px"> </uni-col>
			</uni-row>
		</uni-forms>

		<view style="margin-top: 30px">
			<button type="primary" @click="submit('baseForm')">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		getPhoneAuthCode,
		loginByPhone,
		getStaffByOmUuid
	} from "../../utils/api";

	export default {
		components: {},
		data() {
			return {
				form: {
					password: "",
					password1: "",
					phone: "",
					authCode: "",
				},
				rules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: "登录手机号不能为空"
						}, {
							validateFunction: this.phoneValidator
						}]
					},
					authCode: {
						rules: [{
							required: true,
							errorMessage: "短信验证码不能为空"
						}, {
							validateFunction: this.authCodeValidator
						}]
					},
				},
				tips: "",
				seconds: 60,
			};
		},
        onLoad(params) {
            // uni.setEnableDebug({
            //     enableDebug: true,
            // });
        },
		methods: {
			//开始
			start() {
				this.$refs.countDown.start();
			},
			onChange(e) {
				this.value = e;
			},
			submit(ref) {
				this.$refs[ref].validate().then(async (values) => {
					uni.showLoading({
						title: "正在登录中"
					});
					let res = await loginByPhone({
						phone: values.phone,
						authCode: values.authCode,
						expiresIn: "1y"
					});
					if (res && res.baseInfo) {
						let orgRes = await getStaffByOmUuid({
							omUuid: res.baseInfo.uuid
						});
						uni.hideLoading();
						if (orgRes?.omUuid) {
							this.$store.dispatch("personInfo/save", {
								staffInfo: orgRes,
								staffId: orgRes.orUuid
							});
                            
                            this.$store.dispatch("activityInfo/getActivityByStaff", {});
                                
							uni.showToast({
								title: "登录成功"
							});
							if (orgRes?.isBoss) {
								uni.redirectTo({
									url: "/pages/boss/index"
								});
							} else {
								uni.redirectTo({
									url: "/pages/staff/index"
								});
							}
						} else {
							uni.showToast({
								title: "没有员工信息"
							});
						}
					}
				});
			},
			codeChange(text) {
				this.tips = text;
			},
			async getPhoneAuthCode() {
				if (this.$refs.uCode.canGetCode) {
					if (this.form.phone && /^[0-9]{11,11}$/.test(this.form.phone)) {
						uni.showLoading({
							title: "正在获取验证码"
						});
						let res = await getPhoneAuthCode({
							phone: this.form.phone,
							template: "loginConfirm"
						});
						if (res) {
							uni.hideLoading();
							uni.$u.toast("验证码已发送");
							this.$refs.uCode.start();
						}
						uni.hideLoading();
					} else {
						return uni.$u.toast("请输入正确的手机号");
					}
				} else {
					uni.$u.toast("倒计时结束后再发送");
				}
			},

			end() {},

			start() {},

			phoneValidator: async (rule, value, data, callback) => {
				if (value && /^[0-9]{11,11}$/.test(value)) {
					return callback();
				}
				return callback("请输入正确的手机号");
			},

			authCodeValidator: async (rule, value, data, callback) => {
				if (data.phone && /^[0-9]{11,11}$/.test(data.phone)) {
					if (value && /^[0-9]{4}$/.test(value)) {
						return callback();
					}
					return callback("密码必须是4位数字");
				}
				return callback("请输入正确的手机号");
			},
		},
	};
</script>

<style lang="scss" scoped>
	.form-main {
		padding: 10px 20px;
	}
</style>
